/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>列表为店铺申请加入各项消费者保障服务记录</li>
          <li>当店铺提出的申请记录状态为“等待审核”、“保证金待审核”的时候，可以编辑申请；否则只能查看申请详情。</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <div class="mDiv">
      <div class="ftitle">
        <h3>{{listType}}申请列表</h3>
        <h5>(共 {{totalCount}} 条记录)</h5>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
    </div>
    <div class="tablebox" v-if="tableData">
      <el-table :data="tableData" ref="multipleTable" style="width: 100%;">
        <el-table-column label="店铺名称" prop="store_name" width="150"></el-table-column>
        <el-table-column label="保障服务" prop="grt_name" width="150"></el-table-column>
        <el-table-column label="添加时间" prop="add_time_desc" width="200"></el-table-column>
        <el-table-column label="状态" prop="auditstate_desc" width="200"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
			<el-button-group>
				<el-button
				  size="small"
				  v-if="scope.row.auditstate == 0 || scope.row.auditstate == 3"
				  @click="action='edit';detail(scope.row)"
				  icon="el-icon-finished"
				>审核</el-button>
				<el-button
				  size="small"
				  v-else
				  @click="action='info';detail(scope.row)"
				  icon="el-icon-zoom-in"
				>查看</el-button>
			</el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="paginationbox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>

    <!-- 编辑/查看申请 - dialog -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="32%"
      :modal-append-to-body="false"
      center
    >
      <el-form :model="guaranteeApply" label-width="100px">
        <el-form-item label="项目名称：">{{guaranteeApply.grt_name}}</el-form-item>
        <el-form-item label="店铺名称：">{{guaranteeApply.store_name}}</el-form-item>
        <el-form-item label="申请时间：">{{guaranteeApply.add_time_desc}}</el-form-item>
        <el-form-item label="付款凭证：" v-if="guaranteeApply.costimg">
          <img :src="guaranteeApply.costimg" class="avatar" style="width: 126px; height: 95px" />
        </el-form-item>
        <div v-if="action=='edit'">
          <el-form-item label="审核状态：">
            <el-radio-group v-model="auditstate" v-if="guaranteeApply.auditstate < 3">
              <el-radio :label="0">等待审核</el-radio>
              <el-radio :label="1">
                审核通过
                <span v-if="applyType == 1">，待支付保证金</span>
              </el-radio>
              <el-radio :label="2">审核未通过</el-radio>
            </el-radio-group>
            <el-radio-group v-model="auditstate" v-else>
              <el-radio :label="3">保证金审核</el-radio>
              <el-radio :label="4">保证金审核通过</el-radio>
              <el-radio :label="5">保证金审核失败</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="原因备注：" v-if="auditstate == 2 || auditstate == 5">
            <el-input type="textarea" v-model="logMsg" style="width:350px"></el-input>
            <p class="notic">原因备注应小于200个字符</p>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提 交</el-button>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="审核状态：">{{guaranteeApply.auditstate_desc}}</el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getGuaranteeApplyPage,updateAuditstate} from "@/utils/api";
export default {
  data() {
    return {
      applyType: 1,
      tableData: [],
      currentPage: this.$route.params.currentPage || 1,
      totalCount: 0,
      pageSize: 10,
      dialogTitle: "",
      dialogVisible: false,
      guaranteeApply: {},
      auditstate: null,
      logMsg: null,
      action: "edit",
      listType: "加入"
    };
  },
  watch: {
    $route: function(to, form) {
      this.applyType = to.params.type;
      if (this.applyType == 0) {
        this.listType = "退出";
      } else {
        this.listType = "加入";
      }
      this.getPage();
    }
  },
  created() {
    this.getPage();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getPage();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getPage();
    },
    getPage() {
      var that = this;
	  getGuaranteeApplyPage({
		  apply_type: this.applyType,
		  page: this.currentPage,
		  size: this.pageSize
	  })
	  .then(function(res) {
	    res.records.forEach(e => {
	      if (e.auditstate == 1 && that.applyType == 0) {
	        e.auditstate_desc = "审核通过";
	      }
	    });
	    that.tableData = res.records;
	    that.totalCount = res.total;
	  });
    },
    refresh() {
      this.getPage();
      this.$message({
        type: "success",
        message: "刷新成功！"
      });
    },
    detail(row) {
      if (this.action == "edit") {
        this.dialogTitle = "服务申请审核";
      } else {
        this.dialogTitle = "服务申请详情";
      }
      this.logMsg = "";
      this.auditstate = row.auditstate;
      this.guaranteeApply = row;
      this.dialogVisible = true;
    },
    onSubmit() {
      this.guaranteeApply.auditstate = this.auditstate;
      var that = this;
	  updateAuditstate(this.logMsg,this.guaranteeApply)
	  .then(function(res) {
	    if (res.status == 1) {
	      that.$message.success("操作成功");
	      that.getPage();
	      that.dialogVisible = false;
	    } else {
	      that.$message.error(res.msg);
	    }
	  });
    }
  }
};
</script>

<style scoped>
</style>
